<template>
  <h1>首页</h1>
  <!-- 如果用户的信息为空,说明没有登录,展示 "注册" "登录" 链接 -->
  <div v-if="user==null">
    <router-link to="/reg">注册</router-link>
    <router-link to="/login">登录</router-link>
  </div>
  <!-- 反之,如果用户信息不为空,说明已登录,展示 欢迎信息与"发微博" "退出登录" 按钮 -->
  <div v-else>
    <h2>欢迎{{user.nickname}}回来!</h2>
    <router-link to="/post">
      <el-button>发微博</el-button>
    </router-link>
    <router-link to="/personal">
      <el-button>我的微博</el-button>
    </router-link>
    <el-button @click="logout()">退出登录</el-button>
  </div>
  <hr>
  <!-- 无论是否登录,都能看到已发布的微博 -->
  <div v-for="weibo in arr">
    <!-- 将页面数据与arr数组进行绑定,只要arr有数据,就可以显示出来内容 -->
    <!-- 给此条微博包裹链接,点击跳转至此条微博的详情页 注意:此处的to属性需要属性绑定!-->
    <router-link :to="'/detail?id='+weibo.id" style="text-decoration:none;color:#555;">
      <h3>{{weibo.nickname}}说:{{weibo.content}}</h3>
    </router-link>
    <!--    <p>{{weibo.imgUrls}}</p>-->
    <img v-if="weibo.imgUrls!=null"
        :src="BASE_URL+url"
         width="100"
         v-for="url in weibo.imgUrls.split(',')">
  </div>
</template>

<script setup>
import {onMounted, ref} from "vue";
 import axios from "axios";
 //1.取出登录成功后存入localStorage中的user数据
 //但注意字符串格式的数据需要转回为JS对象后才可以打点获取JS对象的属性值
 //三元表达式的写法,有数据转回JS对象,没有数据则为null
 const user = ref(localStorage.user?JSON.parse(localStorage.user):null);
 console.log(user.value);



 const logout = ()=>{
   if (confirm('您确认要退出吗?')){
     //清空localStorage中保存的数据,但注意这并不会影响已经取出来的user数据
     localStorage.clear();
     //还需要将已取出来的响应式变量user的数据重置为null,这样页面才会立即跟着重置
     user.value = null;
   }
 }

 //准备空数组用来装所有的微博数据
 const arr = ref([]);

//页面加载完毕立即执行的方法
onMounted(()=>{
  //页面一加载,立即向后端发请求获取所有的微博数据
  axios.get(BASE_URL+'/v1/weibos/list').then((response)=>{
    //如果成功请求回来数据
    if (response.data.code==2002){
      console.log(response.data.data);
      //将请求回来的数据存入arr数组中
      arr.value = response.data.data;
    }
  })
})


</script>
